<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
 response.setHeader("Pragma","No-cache");
 response.setHeader("Cache-Control","no-cache");
 response.setDateHeader("Expires", 0);
 %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<c:if test="${sessionScope.admin==null }" >
<meta http-equiv="refresh" content="0;url=admin_login.jsp">
</c:if> 
<title>抽奖</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

body {
	/*
	background-color: #2C1914;
	*/
	text-align: center;
	font-family: "宋体";
}

a img,ul,li {
	list-style: none;
}

a {
	text-decoration: none;
	outline: none;
	font-size: 12px;
}

input,textarea,select,button {
	font-size: 100%;
}

.abs {
	position: absolute;
}

.rel {
	position: relative;
}

.wrap {
	/*
	min-height: 800px;
	*/
	
}

.main {
	height: 600px;
}

.con980 {
	width: 980px;
	margin: 0 auto;
}

.header {
	width: 100%;
	height: 50px;
}

.play {
	background: url() no-repeat;
	width: 980px;
	height: 625px;
	padding: 22px 0 0 21px;
}

td {
	width: 187px;
	height: 115px;
	font-family: "微软雅黑";
	background-color: #666;
	text-align: center;
	line-height: 115px;
	font-size: 80px;
}

.playcurr {
	background-color: #F60;
}

.playnormal {
	background-color: #666;
}

.play_btn {
	width: 480px;
	height: 115px;
	display: block;
	background-color: #F60;
	border: 0;
	cursor: pointer;
	font-family: "微软雅黑";
	font-size: 40px;
}

.play_btn:hover {
	background-position: 0 -115px;
}

.btn_arr {
	left: 255px;
	top: 255px;
}
</style>
<script type="text/javascript" src="Dialog.js"></script>
<script type="text/javascript">
var xmlHttp = false;
var end=0;

function zOpenD1(){
	var diag = new Dialog("Diag2");
	diag.Width = 1040;
	diag.Height = 600;
	diag.Title = "修改文章";
	diag.URL = "http://www.sina.com.cn";
	//diag.OKEvent = zAlert;//点击确定后调用的方法
	diag.show();
}

function zOpen(){
	var diag = new Dialog("Diag2");
	diag.Width = 900;
	diag.Height = 400;
	diag.Title = "弹出窗口示例";
	diag.URL = "http://www.baidu.com";
	diag.OKEvent = zAlert;//点击确定后调用的方法
	diag.show();
}

function zAlert(){
	Dialog.alert("");
}

function choujiang(){
	var maxnumbers = document.lotto.maxnum.value*1;    
	var EndIndex = 1+Math.round(Math.random() * (maxnumbers));
	end = EndIndex;
	//alert("EndIndex:"+EndIndex);
    sendRequest("GET","choujiang.action?luck_num="+EndIndex,true,callback);

}

function view_result(){
	//alert("view_result");
	sendRequest("GET","view_result.action",true,callback1);
}

function sendRequest(method, url, async, callback) {
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        //xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        var msxmls = ["MSXML3" , "MSXML2" , "Microsoft"];
        for(var i=0; i < msxmls.length; i++)
        {
        	try
        	{
        		xmlHttp = new ActiveXObject(msxmls[i]+".XMLHTTP");
        	}
        	catch(e)
        	{
        		//alert("您的浏览器不支持XMLHTTP控件");
        	}
        }
    }
    if (!xmlHttp) {
        alert("错误");
    } else {
        xmlHttp.open(method, url, async);
        xmlHttp.onreadystatechange = callback;
        xmlHttp.send();
    }
}

function zAlert(){
	Dialog.alert("你点击了一个按钮");
}

function callback(){
	//alert("end1:"+end);
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var str = xmlHttp.responseText;
        //alert(str);
        var obj = eval("(" + str + ")");
       // alert(obj.name + " : " + obj.age);
       //alert("end2:"+end);
       if(obj.age == "totaloverflowerror"){
    	   view_result();
    	   Dialog.alert("已经抽奖完毕了~~");
    	   //zAlert();
    	  // alert("已经抽奖完毕了~~");
    	   for(var winnerid=1;winnerid<=16;winnerid++)
    	        document.getElementById("winner"+winnerid).innerHTML = "^_^";
    	   var tb = document.getElementById("tb");     //获取tb对象
    	   var arr = GetSide(5,5);
    	   for(var arri =0;arri<16;arri++){
	          	tb.rows[arr[arri][0]].cells[arr[arri][1]].className="playcurr";
	          }
       }else if(obj.age == "alreadyexisterror"){
    	   choujiang();
       }else if(obj.age == "success"){
    	   StartGame(end);
       }
    	   
    }
}

function callback1(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var str = xmlHttp.responseText;
        var obj = eval("(" + str + ")");
		//alert(obj.length); 
		var result ="";
		var third="三等奖:";
		var second="二等奖:";
		var first="一等奖:";
		//alert(123);
		for(var i=1;i<=obj.length;i++){
			if(obj[i-1].luck_group == 3){
				third = third+obj[i-1].luck_num +"号    ";
			}else if(obj[i-1].luck_group == 2){
				second = second+obj[i-1].luck_num +"号    ";
			}else if(obj[i-1].luck_group == 1){
				first = first+obj[i-1].luck_num +"号    ";
			}
		
		}
		result = third+second+first;
		//alert(result);
		document.getElementById("text").innerHTML = third+"<br/>"+second+"<br/>"+first;
		//obj = null;
    }
}

function delete_confirm() {  
    var msg = "确认删除已经存在的分组数据吗？？？";  
    if (confirm(msg) == true) {  
    	delete_choujiang();  
    } else {  
        return false;  
    }  
} 

function delete_choujiang(){
	//alert("view_result");
	sendRequest("GET","delete_choujiang.action",true,delete_choujiang_callback);
}

function delete_choujiang_callback(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var str = xmlHttp.responseText;
        var obj = eval("(" + str + ")");
        Dialog.alert(obj.name + " : " + obj.age);
    }
    view_result();
    for(var winnerid=1;winnerid<=16;winnerid++)
        document.getElementById("winner"+winnerid).innerHTML = "";
    //刷新抽奖结果
}
</script>
</head>
<body align="center">
	<form name="lotto">
		<div class="wrap">
			<div class="header">
			<br/>
				总人数<input type="text" name="maxnum" value="80" 
					maxlength=2> <a href="#" onclick="view_result();return false;">查看结果</a>
					|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="delete_confirm();return false;">删除已存在的抽奖数据</a>
					<br />
					<font color="red">
				<span id="text" style="align: center"></span>
				</font>
				<br/>
			</div>
			<div class="main">
				<div class="con980">
					<div class="play rel">
						<p class="btn_arr abs">


							<input value="开始抽奖" id="btn1" type="button"
								onclick="choujiang()" class="play_btn">

						</p>
						<table class="playtab" id="tb" cellpadding="0" cellspacing="1">
							<tr>
								<td><span id="winner1" style="font-size: 85px"></span></td>
								<td><span id="winner2" style="font-size: 85px"></span></td>
								<td><span id="winner3" style="font-size: 85px"></span></td>
								<td><span id="winner4" style="font-size: 85px"></span></td>
								<td><span id="winner5" style="font-size: 85px"></span></td>
							</tr>
							<tr>
								<td><span id="winner6" style="font-size: 85px"></span></td>
								<td></td>
								<td></td>
								<td></td>
								<td><span id="winner7" style="font-size: 85px"></span></td>
							</tr>
							<tr>
								<td><span id="winner8" style="font-size: 85px"></span></td>
								<td></td>
								<td></td>
								<td></td>
								<td><span id="winner9" style="font-size: 85px"></span></td>
							</tr>
							<tr>
								<td><span id="winner10" style="font-size: 85px"></span></td>
								<td></td>
								<td></td>
								<td></td>
								<td><span id="winner11" style="font-size: 85px"></span></td>
							</tr>
							<tr>
								<td><span id="winner12" style="font-size: 85px"></span></td>
								<td><span id="winner13" style="font-size: 85px"></span></td>
								<td><span id="winner14" style="font-size: 85px"></span></td>
								<td><span id="winner15" style="font-size: 85px"></span></td>
								<td><span id="winner16" style="font-size: 85px"></span></td>
							</tr>
						</table>
					</div>
				</div>
			</div>

		</div>
	</form>
	<br />
	<div></div>
	<br />
	<div></div>

	<script type="text/javascript">
     
	/*
     * 删除左右两端的空格
     */
     function Trim(str){
         return str.replace(/(^\s*)|(\s*$)/g, ""); 
     }
     
     /*
      * 定义数组
      */
     function GetSide(m,n){
         //初始化数组
            var arr = [];
            for(var i=0;i<m;i++){
                arr.push([]);
                for(var j=0;j<n;j++){
                    arr[i][j]=i*n+j;
                }
            }
          //获取数组最外圈
            var resultArr=[];
            var tempX=0,
             tempY=0,
             direction="Along",
             count=0;
            while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n)
            {
                count++;
                resultArr.push([tempY,tempX]);
                if(direction=="Along"){
                    if(tempX==n-1)
                        tempY++;
                    else
                        tempX++;
                    if(tempX==n-1&&tempY==m-1)
                        direction="Inverse"
                }
                else{
                    if(tempX==0)
                        tempY--;
                    else
                        tempX--;
                    if(tempX==0&&tempY==0)
                        break;
                }
            }
            return resultArr;
        }
        
     var index=0,           //当前亮区位置
     prevIndex=0,          //前一位置
     Speed=100,           //初始速度
     Time,            //定义对象
       arr = GetSide(5,5),         //初始化数组
         EndIndex=0,           //决定在哪一格变慢
         tb = document.getElementById("tb"),     //获取tb对象
         cycle=0,           //转动圈数  
         EndCycle=0,           //计算圈数
        flag=false,         //结束转动标志 
        quick=0;          //加速
        btn = document.getElementById("btn1")
        
        function StartGame(luck_num){
        /////////////////////////
         
	     clearInterval(Time);
         cycle=0;
         flag=false;
        // EndIndex=Math.floor(Math.random()*16);
        //var maxnumbers = document.lotto.maxnum.value*1;
        
        EndIndex = luck_num;
        //alert("111111luck_num:"+luck_num);
        //choujiang(EndIndex);
        //alert(EndIndex);
		 //EndIndex = 8;
         //EndCycle=Math.floor(Math.random()*4);
         EndCycle=1;
         Time = setInterval(Star,Speed);
        }
        
        function Star(num){
        	//跑马灯变速
            if(flag==false){
            	//走五格开始加速
             if(quick==5){
                 clearInterval(Time);
                 Speed=50;
                 Time=setInterval(Star,Speed);
             }
           //跑N圈减速
            // if(cycle==EndCycle+1 && index==parseInt(EndIndex)){
            //	if(cycle==EndCycle+1 && index==parseInt(EndIndex)){
            	if(cycle==EndCycle+1 && index== 5){
                 clearInterval(Time);
                 Speed=100;
                 flag=true;    //触发结束	 
                 Time=setInterval(Star,Speed);
                 for(var winnerid=1;winnerid<=16;winnerid++)
                 document.getElementById("winner"+winnerid).innerHTML = EndIndex;
             }
            }
            
            if(index>=arr.length){
                index=0;
                cycle++;
            }
            
          //结束转动并选中号码
 		   //trim里改成数字就可以减速，变成Endindex的话就没有减速效果了
         //if(flag==true && index==parseInt(Trim('5'))-1){ 
		 //if(flag==true && index== parseInt(EndIndex)){

            tb.rows[arr[index][0]].cells[arr[index][1]].className="playcurr";
            if(index>0)
                prevIndex=index-1;
            else{
                prevIndex=arr.length-1;
            }
            tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className="playnormal";
            index++;
            quick++;
            
			 if(flag==true){
		          quick=0;
		          clearInterval(Time);
		          for(var arri =0;arri<16;arri++){
		          	tb.rows[arr[arri][0]].cells[arr[arri][1]].className="playcurr";
		          }
		          view_result();
		          //刷新抽奖结果
		         // tb.rows[arr[1][0]].cells[arr[1][1]].className="playcurr";
		         // tb.rows[arr[2][0]].cells[arr[2][1]].className="playcurr";
		          
		         // tb.rows[arr[15][0]].cells[arr[15][1]].className="playcurr";
		          
		            }
            
        }
          
    </script>
</body>
</html>